import { ExpertAddAddress, ExpertAddressprops } from '@/api/expert';
import {
  Area,
  Button,
  Divider,
  Field,
  Icon,
  Overlay,
  Popup,
} from '@antmjs/vantui';
import { Switch, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { areaList } from '@vant/area-data';
import { useSetState } from 'ahooks';
import { useState } from 'react';
import { useRequest } from 'taro-hooks';

areaList.province_list = { 310000: '上海市' };

export default function useEdit(props?: {
  detail?: ExpertAddressprops;
  onSuccess: Function;
}) {
  const [detail, setDetail] = useState<ExpertAddressprops | undefined>();
  const [show, setShow] = useState<boolean>(false);
  const [showAddress, setShowAddress] = useState<boolean>(false);

  const [formValues, setFormValues] = useSetState<{
    code: { code: string; name: string }[] | undefined;
    area: string | undefined;
    address: undefined | string;
    isDefault: boolean;
  }>({
    area: undefined,
    code: undefined,
    address: undefined,
    isDefault: false,
  });

  const { runAsync: runAddAddress } = useRequest(ExpertAddAddress, {
    manual: true,
  });

  function handleClose() {
    setFormValues({
      code: undefined,
      area: undefined,
      address: undefined,
      isDefault: false,
    });
    setDetail(undefined);
    setShow(false);
  }

  function renderNode() {
    return (
      <>
        <Overlay
          className=' flex flex-col items-center pt-20'
          show={show}
          style={{
            overflow: 'initial',
          }}
        >
          <View className='w-[670px] bg-white rounded-xl relative'>
            <Icon
              name='close'
              className=' absolute text-3xl text-white right-0 -top-[100px]'
              onClick={() => handleClose()}
            />

            <View className=' text-lg text-black font-bold p-4'>
              {detail?.id ? '编辑' : '新增'}地址
            </View>
            <Divider className='m-0' />
            <View className='p-4'>
              <View className=' space-y-4'>
                <View
                  onClick={() => {
                    setShowAddress(true);
                  }}
                >
                  <Field
                    isLink
                    readonly
                    label='所在地区'
                    className='rounded-lg border-4 border-gary5 border-solid'
                    border={false}
                    placeholder='请选择所在地区'
                    value={formValues.area}
                  />
                </View>
                <Field
                  onChange={(e) => {
                    setFormValues({
                      address: e.detail,
                    });
                  }}
                  value={formValues.address}
                  label='详细地址'
                  placeholder='请输入详细地址'
                  className='rounded-lg border-4 border-gary5 border-solid'
                  border={false}
                />

                <View className='flex justify-between items-center text-sm text-gary4'>
                  设为默认地址
                  <Switch
                    color='var(--primary-color)'
                    checked={formValues.isDefault}
                    onChange={(e) => {
                      setFormValues({
                        isDefault: e.detail.value,
                      });
                    }}
                  />
                </View>
              </View>

              <Button
                type='primary'
                block
                className=' mt-12'
                onClick={async () => {
                  if (!formValues.area)
                    return Taro.showToast({
                      title: '请选择地区',
                      icon: 'none',
                    });
                  if (!formValues.address)
                    return Taro.showToast({
                      title: '请输入详细地址',
                      icon: 'none',
                    });

                  await runAddAddress({
                    id: detail?.id,
                    code: JSON.stringify(formValues.code),
                    area: formValues.area,
                    address: formValues.address,
                    def: formValues.isDefault ? 1 : 0,
                  });

                  props?.onSuccess();
                  setShow(false);
                }}
              >
                保存地址
              </Button>
            </View>
          </View>
        </Overlay>

        <Popup show={showAddress} position='bottom' round>
          <Area
            value='310000'
            areaList={areaList}
            onCancel={() => setShowAddress(false)}
            onConfirm={(e) => {
              setFormValues({
                code: e.detail.value,
                area: e.detail.value?.map((i) => i.name).join('/'),
              });
              setShowAddress(false);
            }}
          />
        </Popup>
      </>
    );
  }
  return {
    renderNode,
    open: (props?: { detail?: ExpertAddressprops }) => {
      setShow(true);
      if (props?.detail) {
        setDetail(props.detail);
        setFormValues({
          area: props.detail.area,
          address: props.detail.address,
          isDefault: props.detail.def,
        });
      }
    },
  };
}
